body {
    background-color: #efefef;
}

.main {
    background-color: white;
    margin: 30px;
}

.btn-publish {
    float: right;
    margin-bottom: 10px;
}

.media-object {
    width: 40px;
    height: 40px;
}

.text-desc {
    font-size: 12px;
    font-weight: normal;
    color: #999;
}

.section {
    margin-top: 30px;
}

.community-menu {
    color: #999;
    font-size: 13px;
    margin-bottom: 15px;
}

.community-menu img {
    height: 14px;
}

.jumbotron {
    margin: 50px;
}

.community-heading {
    margin: 10px 0;
    font-size: 16px;
}

.comment-content {
    margin: 10px 0;
    resize: none;
}

.btn-content {
    float: right;
    margin-bottom: 10px;
}

.question-title {
    margin-top: 25px;
}

.question-tag {
    margin-right: 5px;
}

.publish-tag-tab {
    display: none;
    margin-top: 10px;
    padding-top: 10px;
}

.publish-tag-tab .label-info {
    white-space: normal;
    margin: 5px 5px;
    display: inline-block;
    cursor: pointer;
}

.photo-name {
    margin-top: 0;
}

.photo {
    width: 100%;
    height: 220px;
}

.question-related {
    padding-left: 0;
    list-style: none;
    text-decoration: none;
    font-size: 14px;
    line-height: 25px;
}

.comment-heading {
    margin: 2px 0;
    font-size: 12px;
    color: #999;
}

.comments {
    padding-bottom: 5px;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.comment-sp {
    margin-top: 0;
}

.menu {
    font-size: 14px;
    margin-top: 5px;
    color: #999;
}

.menu .active {
    color: #2aabd2;
}

.menu .icon {
    cursor: pointer;
    margin: 0 4px;
}

.menu .comment-icon {
    display: inline-block;
    cursor: pointer;
}

.menu .icon:hover {
    color: #2aabd2;
}

.menu .count {
    margin-left: -5px;
}

/*二级评论*/
.sub-comments {
    margin: 15px 0;
    border: 1px solid #eee;
    border-radius: 5px;
    padding-top: 15px;
}

.sub-comments .btn {
    margin: 10px 0;
}

.foot {
    color: #666;
    padding: 10px 28%;
}

/*表情*/
.w-e-item img {
    height: 20px;
}

/*navigation*/
/*导航卡的固定长度*/
/*.nav-box {*/
/*    width: 90px;*/
/*}*/

.avatar img {
    border: 1px solid #fff;
    -webkit-transition: .8s;
    -moz-transition: .8s;
    -o-transition: .8s;
    -ms-transition: .8s;
}

.avatar img:hover {
    -moz-box-shadow: 0 3px 10px #888;
    -webkit-box-shadow: 0 3px 10px #888;
    transform: rotate(720deg);
    -webkit-transform: rotate(720deg);
    -moz-transform: rotate(720deg);
    -o-transform: rotate(720deg);
    -ms-transform: rotate(720deg);
    border-radius: 35px;
}

.image-light, .image-light > img {
    display: block;
}

/*父容器*/
.image-light {
    overflow: hidden;
    position: relative; /*设置为相对*/
}

/*图片*/

/*流光（采用伪类实现，当然也可以是子元素）*/
.image-light:after {
    content: '';
    position: absolute; /*相对父级绝对定位*/
    width: 80px;
    height: 100%;
    top: 0;
    left: -200px; /*起始位置*/
    overflow: hidden;
    z-index: 9;
    /*背景渐变（兼容性写法）*/
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, 0) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, .3)), color-stop(100%, rgba(255, 255, 255, 0)));
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, 0) 100%);
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, 0) 100%);
    -webkit-transform: skewX(-25deg); /*倾斜*/
    -moz-transform: skewX(-25deg);
    transform: skewX(-25deg);
}

/*鼠标滑过*/
.image-light:hover:after {
    -webkit-transition: left 1s ease-in-out; /*过渡*/
    transition: left 1s ease-in-out;
    left: 120%; /*结束位置*/
}
